<!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'>
  <title>Hitokoto · 一言</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./css/bootstrap-5.2.0.min.css">

  <link rel="stylesheet" href="./css/index.css">

</head>

<body>
  <div class="bg"></div>
  <div class="container-fluid" id="root">
    <div class="container">

      <div class="main">
        <div class="top">
          <div class="left">『</div>
          <div class="content">{{datas.hitokoto}}</div>
          <div class="right">』</div>
        </div>

        <div class="wrap">—— {{datas.from_who}}「{{datas.from}}」</div>
      </div>
      <!-- <div class="wrap">—— {{datas.from_who}}「{{datas.from}}」</div> -->
    </div>
  </div>










</body>
<script src="../../static/js/jquery3.2.1.min.js"></script>

<script src="../../static/js/vue2.6.14.min.js"></script>
<script type="text/javascript">

  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  new Vue({
    el: '#root',

    data() {
      return {
        datas: []
      }
    },

    mounted() {




      // 这里一定要使用常量 const来引用this，不然可能会出现this指向问题
      const that = this
      // 使用getjson读取数据
      //   $.getJSON("https://v1.hitokoto.cn/", function (data) {
      //     // 将读取到的json数据赋值给rows
      //     that.datas = data.content;
      //     console.log("请求到的数据：", data)
      //   });
      // },

      $.ajax({
        url: 'https://v1.hitokoto.cn/?encode=json ', // 替换为你的API端点
        type: 'GET', // 或者 'POST'，取决于你要使用的HTTP方法
        dataType: 'json', // 期望的数据类型
        // 跨域请求
        crossDomain: true, //
        // headers: { 'Access-Control-Allow-Origin': '*' },

        success: function (data) {
          that.datas = data;
          // 请求成功时的回调函数
          console.log(data);
        },
        error: function (xhr, status, error) {
          // 请求失败时的回调函数
          // console.error(error);
        }
      })

    },



  })
</script>






<script>

  function shuaxin() {
    window.location.reload();
  }
  setTimeout(shuaxin, 10000);

</script>

</html>